<template>
  <div class="test">
    <globalhead :mes="mes"></globalhead>

    <div class="main">
      <div class="btn">Neon</div>
      <div class="btn btn1">Neon</div>
      <div class="btn btn2">Neon</div>
      <div class="btn btn3">Neon</div>
    </div>
  </div>
</template>

<script>
import testlib from "../../public/MyLibraryJs.js"
import globalhead from "../components/global.vue"
export default {
  components: {
    globalhead
  },
  data() {
    return {
      mes: "测试"
    }
  },
  methods: {

  },
  mounted() {
    console.log(testlib)
    testlib.bubblyButton()
  }
}
</script>

<style lang="scss" scoped>
:root {
  --color: #0ebeff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.test {
  height: auto;
  .main {
    margin-top: 50px;
    // border: 1px solid red;
    // background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
    // background-repeat: no-repeat;
    // background-attachment: fixed;
    // background-size: cover;
    // background-position: top;
    // overflow: hidden;
    width: 100%;
    height: 500px;
    // display: flex;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: rgb(172, 172, 172);
    border: 1px solid red;

    .btn {
      position: relative;
      z-index: 0;
      width: 160px;
      height: 80px;
      line-height: 80px;
      color: var(--color);
      font-size: 24px;
      border-radius: 10px;
      text-align: center;
      margin: auto;
      overflow: hidden;
      cursor: pointer;
      transition: 0.3s;
      -webkit-box-reflect: below 10px
        linear-gradient(transparent, rgba(56, 14, 243, 0.4));

      &:hover {
        color: #fff;
        box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);

        &::after,
        &::before {
          transition: 0.3s;
          background: var(--color);
        }
      }

      &::before {
        content: "";
        position: absolute;
        z-index: -2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 150%;
        height: 300%;
        background-color: rgb(255, 154, 154);
        background-repeat: no-repeat;
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-image: conic-gradient(var(--color), var(--color));
        animation: rotate 2s linear infinite;
      }

      &::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background: rgb(2, 240, 121);
        border-radius: 10px;
      }
    }

    .btn1 {
      filter: hue-rotate(180deg);
    }

    .btn2 {
      filter: hue-rotate(270deg);
    }

    .btn3 {
      filter: hue-rotate(90deg);
    }
  }
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}
</style>